<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>视频监控</title>
		<!-- 引入 FLV.js -->
		<!-- <script src="https://cdn.jsdelivr.net/npm/flv.js@1.6.2/dist/flv.min.js"></script> -->
		<script src="./EasyPlayer-pro.js"></script>
		<style>
			/* 简单的样式调整 */
			body {
				font-family: Arial, sans-serif;
				/* display: flex; */
				justify-content: center;
				/* align-items: center; */
				height: 100vh;
				margin: 0;
				background-color: #f0f0f0;
				width: 100%;
			}

			video {
				width: 100%;
				max-width: 800px;
				height: auto;
				border: 1px solid #ccc;
				box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
			}

			.list-container {
				display: flex;
				/* flex-direction: column; */
				/* list-style: none; */
				/* padding-inline-start: 0; */
				flex-wrap: wrap;
				gap: 10px;
				width: 100%;
				padding: 10px;
			}
			.player_box{
				width: 100%;
				height: 200px;
			}
			.list-item {
				width: calc(100%-20px);
				/* text-align: center; */
				background: #fff;
				border-radius: 10px;
				padding: 8px;
				/* margin: 10px; */
				display: flex;
				flex-direction: column;
				width: 42%;
			}

			.list-item img {
				width: 100%;
				height: auto;
				border-radius: 8px;
			}

			.list-item .name-container {
				margin-top: 8px;
				font-size: 14px;
				color: #333;
				display: flex;
				align-items: center;
				/* justify-content: center; */
			}

			.list-item .name-container img.icon {
				width: 13px;
				height: 15px;
				margin-right: 4px;
			}

			.name-container span {
				font-size: 16px;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
				text-overflow: ellipsis;
				line-height: 1.5em;
				word-break: break-all;
			}

			#videoList,
			#videoPlayer {
				display: none;
			}

			#videoPlayer.active {
				display: block;
			}

			#videoList.active {
				display: block;
			}
			.grid-container {
			            display: grid;
			            grid-template-columns: repeat(3, 1fr); /* 3 列，每列等宽 */
			            grid-template-rows: repeat(3, 50px); /* 3 行，每行高度 100px */
			            width: 150px; /* 容器宽度，根据需要调整 */
			            margin: 0 auto; /* 居中显示 */
			        }
			 
			        .grid-item {
			            background-size: cover; /* 背景图片覆盖整个格子 */
			            background-position: center; /* 背景图片居中 */
			            display: flex;
			            align-items: center;
			            justify-content: center;
			            border-radius: 5px; /* 圆角效果 */
			            cursor: pointer; /* 鼠标悬停时显示指针 */
			        }
					.v0{display: flex;flex-direction: column;}
					.v1{display: flex;margin-top: 30px;}
					.v11{flex: 1;display: flex;flex-direction: column;align-items: center;}
					.v111{width: 44px;height: 50px;display: flex;align-items: center;justify-content: center;}
					.v112{width: 44px;height: 150px;background: #FFFFFF;border-radius: 15px;border: 2px solid #E4EBF2;}
					.v12{flex: 2;}
					.v13{flex: 1;display: flex;flex-direction: column;align-items: center;}
					.v2{margin-top: 30px;}
					.btn{background-color: #fff;width: 100px;height: 40px;border-radius: 12px;color: #222;text-align: center;line-height: 40px;margin-left: 20px;border: 1px;}
					.v3{padding: 12px;display: flex;flex-direction: column;}
					.search{background-color: #fff;width: 40px;height: 32px;border-radius: 5px;color: #222;text-align: center;line-height: 32px;margin-left: 2px;border: 1px;background-color: #085BE7;color: #fff;font-size: 12px;}
		</style>

	</head>
	<body>
		<!-- 视频元素 -->
		<div id="videoPlayer" class="active">
			<!-- <video id="videoElement" controls autoplay onclick="initPlayer()"></video> -->
			<div class="player_box" id="player_box"></div>
			<div class="v0">
			<div class="v1" id="kongzhi">
				<!-- <div class="v11">
					<div class="v112">
					<div class="v111" onclick="CameraPtz(9)">
						<img src="http://8.147.233.147/imgs/jia.png" style="width: 20px;height: 20px;"/>
					</div>
					<div class="v111" >变倍</div>
					<div class="v111" onclick="CameraPtz(10)">
						<img src="http://8.147.233.147/imgs/jian.png" style="width: 20px;height: 20px;"/>
					</div>
					</div>
				</div>
				<div class="v12">
					<div class="grid-container">
					    <div class="grid-item" style="background-image: url('http://8.147.233.147/imgs/zs.png');" onclick="CameraPtz(5)"></div>
					    <div class="grid-item" style="background-image: url('http://8.147.233.147/imgs/s.png');" onclick="CameraPtz(1)"></div>
					    <div class="grid-item" style="background-image: url('http://8.147.233.147/imgs/ys.png');" onclick="CameraPtz(6)"></div>
					    <div class="grid-item" style="background-image: url('http://8.147.233.147/imgs/z.png');" onclick="CameraPtz(3)"></div>
					    <div class="grid-item" style="background-image: url('http://8.147.233.147/imgs/c.png');"></div>
					    <div class="grid-item" style="background-image: url('http://8.147.233.147/imgs/y.png');" onclick="CameraPtz(4)"></div>
					    <div class="grid-item" style="background-image: url('http://8.147.233.147/imgs/zx.png');" onclick="CameraPtz(7)"></div>
					    <div class="grid-item" style="background-image: url('http://8.147.233.147/imgs/x.png');" onclick="CameraPtz(2)"></div>
					    <div class="grid-item" style="background-image: url('http://8.147.233.147/imgs/yx.png');" onclick="CameraPtz(8)"></div>
					</div>
				</div>
				<div class="v13">
					<div class="v112">
					<div class="v111" onclick="CameraPtz(11)">
						<img src="http://8.147.233.147/imgs/jia.png" style="width: 20px;height: 20px;"/>
					</div>
					<div class="v111" >聚焦</div>
					<div class="v111" onclick="CameraPtz(12)">
						<img src="http://8.147.233.147/imgs/jian.png" style="width: 20px;height: 20px;"/>
					</div>
					</div>
				</div> -->
			</div>
			<div class="v3" id="timeDiv">
				<div style="margin-bottom: 10px;">选择日期区间</div>
				<div style="display: flex;align-items: center;">
				<input type="datetime-local" id="datetime" name="datetime" style="height: 32px;">-
				<input type="datetime-local" id="datetimee" name="datetime" style="height: 32px;">
				<span class="search" onclick="searchHui">搜索</span>
				</div>
			</div>
			<div class="v2">
				<button id="backButtonVideo" onclick="showList()" class="btn">监控列表</button>
				<button id="backButtonVideo" onclick="huifang()" class="btn">播回放</button>
				<button id="backButtonVideo3" onclick="lookjiankong()" class="btn">看监控</button>
			</div>
			</div>
		</div>
		<div id="videoList">
			<div class="list-container" id="list-container"></div>
			<!-- <div id="pagination">
		        <button onclick="changePage(1)">First</button>
		        <button onclick="prevPage()">Previous</button>
		        <span id="page-info"></span>
		        <button onclick="nextPage()">Next</button>
		        <button onclick="changePage(Math.ceil(total / pageSize))">Last</button>
		    </div> -->
			<!-- <button onclick="window.open('http://8.147.233.147/imgs/videos.html', '_blank')" class="btn">4G监控1</button> -->
			<!-- // <button onclick="window.open('http://8.147.233.147/imgs/videoss.html', '_blank')" class="btn">4G监控2</button> -->
			<!-- // <button onclick="window.open('http://8.147.233.147/imgs/videosss.html', '_blank')" class="btn">4G监控3</button> -->
			<div class="list-container" id="list-container">
				<div class="list-item" onclick="window.open('http://8.147.233.147/imgs/videos.html', '_blank')">
					<img src="http://8.147.233.147/imgs/b77.png"/>
					<div class="name-container">
						<img src="http://8.147.233.147/imgs/v.png" class="icon"/>
						<span>通榆光热临时监控1</span>
					</div>
				</div>
				<div class="list-item" onclick="window.open('http://8.147.233.147/imgs/videoss.html', '_blank')">
					<img src="http://8.147.233.147/imgs/b77.png"/>
					<div class="name-container">
						<img src="http://8.147.233.147/imgs/v.png" class="icon"/>
						<span>通榆光热临时监控2</span>
					</div>
				</div>
				<div class="list-item" onclick="window.open('http://8.147.233.147/imgs/videosss.html', '_blank')">
					<img src="http://8.147.233.147/imgs/b77.png"/>
					<div class="name-container">
						<img src="http://8.147.233.147/imgs/v.png" class="icon"/>
						<span>通榆光热临时监控3</span>
					</div>
				</div>
				<div class="list-item" onclick="window.open('http://8.147.233.147/imgs/videossss.html', '_blank')">
					<img src="http://8.147.233.147/imgs/b77.png"/>
					<div class="name-container">
						<img src="http://8.147.233.147/imgs/v.png" class="icon"/>
						<span>热熔塔监控1</span>
					</div>
				</div>
				<div class="list-item" onclick="window.open('http://8.147.233.147/imgs/videosssss.html', '_blank')">
					<img src="http://8.147.233.147/imgs/b77.png"/>
					<div class="name-container">
						<img src="http://8.147.233.147/imgs/v.png" class="icon"/>
						<span>热熔塔监控2</span>
					</div>
				</div>
			</div>
		</div>

		<script>
			
			// let currentPage = 1;
			//         const pageSize = 10;
			let total = 0;
			let streamUrl = '';
			let streamUrljk = '';
			let channelId = '';
			let time1 = '';
			let time2 = '';
			var playerInfo = null;
			var config = {
			  stretch: true,
			  hasAudio: true,
			}
			console.log(11111)
			
			var container = document.getElementById('player_box');
			playerInfo = new EasyPlayerPro(container, config);
			
			const datetimeInput = document.getElementById('datetime');
			const datetimeInpute = document.getElementById('datetimee');
			// 设置默认值为当天日期和时间
			  const now = new Date();
			  const formattedDateTime = now.toISOString().slice(0, 16); // 格式: YYYY-MM-DDTHH:mm
			  // datetimeInput.value = formattedDateTime;
			  // datetimeInpute.value = formattedDateTime;
			  const formattedDateTime1 = now.toISOString().slice(0, 10);
			  time1 = formattedDateTime1+' 00:00:00';
			  time2 = formattedDateTime1+' 23:59:59';
			 
			  // 监听变化并输出结果
			  datetimeInput.addEventListener('change', function() {
			    const selectedDateTime = this.value;
			    console.log('选择的日期时间:', selectedDateTime.replace('T', ' ') + ':00');
				time1 = selectedDateTime.replace('T', ' ') + ':00';
			  });
			  datetimeInpute.addEventListener('change', function() {
			    const selectedDateTime = this.value;
			    console.log('选择的日期时间:', selectedDateTime.replace('T', ' ') + ':59');
				time2 = selectedDateTime.replace('T', ' ') + ':59';
			  });
			
			function searchHui(){
				loadHuifang(channelId,time1,time2);
			}
			function getTokenFromUrl() {
				const urlParams = new URLSearchParams(window.location.search);
				return urlParams.get('token');
			}
			// const token = getTokenFromUrl();
			const token = '598a6513-218a-45d8-8db5-4707edde5af7';
			async function loadList(page, pageSize) {
				if (!token) {
					console.error('Token not found in URL');
					return;
				}
				try {
					const response = await fetch('http://8.147.233.147/api/Monitor/list', {
						method: 'POST',
						headers: {
							'Content-Type': 'application/json; charset=utf-8',
							'Accept': '*/*',
							'Access-Control-Allow-Headers': '*',
							'access-control-allow-methods': 'POST, GET, OPTIONS, PUT, DELETE,UPDATE',
							'access-control-allow-origin': 'http://8.147.233.147',
							'host': '8.147.233.147',
							'User-Agent': 'Apifox/1.0.0 (https://apifox.com)',
							// 如果需要，可以在这里添加 Authorization 头部，例如：
							'token': `${token}`
						},
						body: JSON.stringify({
							page: page,
							pageSize: pageSize
						})
					});
					if (!response.ok) {
						throw new Error('Network response was not ok ' + response.statusText);
					}
					const data = await response.json();
					renderList(data.data.resultData.list); // 渲染列表数据
					total = data.data.resultData.total;
					// alert(JSON.stringify(data))
				} catch (error) {
					console.error('There was a problem with your fetch operation:', error);
					// alert(2)
				}
			}
		async function loadHuifang(channel,startTime,endTime) {
				if (!token) {
					console.error('Token not found in URL');
					return;
				}
				try {
					const response = await fetch('http://8.147.233.147/api/Monitor/startPlayBack', {
						method: 'POST',
						headers: {
							'Content-Type': 'application/json; charset=utf-8',
							'Accept': '*/*',
							'Access-Control-Allow-Headers': '*',
							'access-control-allow-methods': 'POST, GET, OPTIONS, PUT, DELETE,UPDATE',
							'access-control-allow-origin': 'http://8.147.233.147',
							'host': '8.147.233.147',
							'User-Agent': 'Apifox/1.0.0 (https://apifox.com)',
							// 如果需要，可以在这里添加 Authorization 头部，例如：
							'token': `${token}`
						},
						body: JSON.stringify({
							channelId: channel,
							startTime: startTime,
							endTime: endTime
						})
					});
					if (!response.ok) {
						throw new Error('Network response was not ok ' + response.statusText);
					}
					const data = await response.json();
					streamUrl = data.data.resultData.streamUrl;
					// alert(streamUrl)
				} catch (error) {
					console.error('There was a problem with your fetch operation:', error);
					// alert(2)
				}
			}
			async function CameraPtz(command) {
					if (!token) {
						console.error('Token not found in URL');
						return;
					}
					try {
						const response = await fetch('http://8.147.233.147/api/Monitor/CameraPtz', {
							method: 'POST',
							headers: {
								'Content-Type': 'application/json; charset=utf-8',
								'Accept': '*/*',
								'Access-Control-Allow-Headers': '*',
								'access-control-allow-methods': 'POST, GET, OPTIONS, PUT, DELETE,UPDATE',
								'access-control-allow-origin': 'http://8.147.233.147',
								'host': '8.147.233.147',
								'User-Agent': 'Apifox/1.0.0 (https://apifox.com)',
								// 如果需要，可以在这里添加 Authorization 头部，例如：
								'token': `${token}`
							},
							body: JSON.stringify({
								channelId: channelId,
								command:command,
								stop: 0,
								speed: 1
							})
						});
						if (!response.ok) {
							throw new Error('Network response was not ok ' + response.statusText);
						}
						const data = await response.json();
						// streamUrl = data.data.resultData.streamUrl;
						// alert(streamUrl)
					} catch (error) {
						console.error('There was a problem with your fetch operation:', error);
						// alert(2)
					}
				}
			function initPlayer(videoUrl) {
				// 初始化播放器
				// if (flvjs.isSupported()) {
				// 	const videoElement = document.getElementById('videoElement');
				// 	const flvPlayer = flvjs.createPlayer({
				// 		type: 'flv',
				// 		url: videoUrl
				// 	});
				// 	flvPlayer.attachMediaElement(videoElement);
				// 	flvPlayer.load();
				// 	flvPlayer.play();
				// } else {
				// 	alert('当前浏览器不支持FLV播放');
				// }
				playerInfo && playerInfo.play(videoUrl).then(() => {
				}).catch((e) => {
				  console.error(e);
				});
			}
			// 渲染列表数据
			function renderList(list) {
				// let list = [{id:1,streamUrl:'ws://192.168.1.127:7080/1/33.live.flv',name:'西南球机',img:'http://8.147.233.147/imgs/b26.png'},{id:1,streamUrl:'ws://111.26.80.184:19002/3232261330/1.live.flv',name:'大门口',img:'http://8.147.233.147/imgs/b26.png'}];
				const listContainer = document.getElementById('list-container');

				list.forEach(item => {
					const listItem = document.createElement('div');
					listItem.className = 'list-item';
					listItem.onclick = () => playVideo(item.streamUrl,item.id);

					// 图片
					const img = document.createElement('img');
					img.src = item.snapshot;
					// img.alt = item.name;

					// 名称容器
					const nameContainer = document.createElement('div');
					nameContainer.className = 'name-container';

					// 图标
					const icon = document.createElement('img');
					icon.src = 'http://8.147.233.147/imgs/v.png'; // 示例图标，替换为实际图标 URL
					icon.alt = 'icon';
					icon.className = 'icon';

					// 名称
					const name = document.createElement('span');
					name.textContent = item.name;

					// 组装名称容器
					nameContainer.appendChild(icon);
					nameContainer.appendChild(name);

					// 组装列表项
					listItem.appendChild(img);
					listItem.appendChild(nameContainer);

					listContainer.appendChild(listItem);
				});
			}
			// 显示列表
			function showList() {
				document.getElementById('videoList').classList.add('active');
				document.getElementById('videoPlayer').classList.remove('active');
				document.getElementById('backButtonVideo').style.display = 'none'; // 确保返回按钮在视频界面正确处理
				
			}
			function huifang(){
				// alert(streamUrl)
				initPlayer(streamUrl);
				document.getElementById("kongzhi").style.display = 'none';
				document.getElementById("backButtonVideo3").style.display = 'inline-block';
				document.getElementById('timeDiv').style.display = 'flex';
			}
			function lookjiankong(){
				initPlayer(streamUrljk);
				document.getElementById("kongzhi").style.display = 'flex';
				document.getElementById("backButtonVideo3").style.display = 'none';
				document.getElementById('timeDiv').style.display = 'none';
			}
			// 隐藏列表，显示视频
			function playVideo(videoUrl,id) {
				// alert(videoUrl)
				streamUrljk = videoUrl;
				channelId = id;
				initPlayer(videoUrl);
				document.getElementById('videoList').classList.remove('active');
				document.getElementById('videoPlayer').classList.add('active');
				document.getElementById('backButtonVideo').style.display = 'inline-block';
				document.getElementById('backButtonVideo3').style.display = 'none';
				document.getElementById('timeDiv').style.display = 'none';
				loadHuifang(id,time1,time2);
			}
			// 初始加载视频列表
			window.onload = function() {
				if (!token) {
					console.error('Token not found in URL'); 
					return;
				}
				showList();
				loadList(1, 10);
			};
		</script>
	</body>
</html>